<template>
	<view class="invite-member">
		<view class="form">
			<view class="form-item">
				<view class="label">昵称</view>
				<view class="input-wrapper">
					<input class="input" type="input" placeholder="请输入昵称" v-model="nickName" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">邀请手机号</view>
				<view class="input-wrapper">
					<input class="input" type="input" placeholder="请输入邀请手机号" v-model="account" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">验证码</view>
				<view class="input-wrapper">
					<input class="input" type="number" placeholder="请输入验证码" v-model="code" />
					<view class="btn" :class="{'disabled-btn' : disabled}" @click="getCode">{{ getCodeText }}</view>
				</view>
			</view>
		</view>
		<view class="add-btn" @click="handleAdd">添加</view>
	</view>
</template>

<script>
	import {
		hideLoading,
		showInfo,
		showLoading
	} from "@/utils/ToastUtils.js";
	import {
		getPhoneCode,
		register,
	} from "@/api/login/index.js";
	import {
		getUserIdByPhone
	} from "@/api/user.js";
	import {
		joinHome,
		setHomeNickName
	} from '@/api/home/index.js'
	import StorageUtils from '@/utils/StorageUtils.js';
	import CacheConfig from "@/config/CacheConfig";

	export default {
		data() {
			return {
				nickName: "",
				account: "",
				code: "",

				countdown: 0,
				getCodeText: "获取验证码",
				timer: undefined,

				isDeleteShow: false,
			};
		},
		computed: {
			disabled() {
				const realValue = this.$u.trim(this.account);
				// console.log("countdown", this.countdown, this.countdown <= 0);
				return !realValue || this.countdown > 0;
			},
		},
		onHide() {
			this.stopCountdown();
		},
		methods: {
			getCode() {
				if(this.disabled) {
					return;
				}
				console.log("获取验证码");
				this.stopCountdown();
				this.startCountdown();
				getPhoneCode({
					phone: this.account
				}).then(res => {
					console.log("getPhoneCode", res);
				}).catch(err => {
					console.log("getPhoneCode error", err);
					showInfo(err.errMsg);
				})
			},
			startCountdown() {
				this.countdown = 60;
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
						this.getCodeText = `${this.countdown}s`;
					} else {
						this.stopCountdown();
					}
				}, 1000);
			},
			stopCountdown() {
				this.getCodeText = "获取验证码";
				clearInterval(this.timer);
			},
			handleAdd() {
				console.log("添加");
				if (!this.nickName) {
					showInfo("请输入昵称");
					return;
				} else if (!this.account) {
					showInfo("请输入账号");
					return;
				} else if (!this.code) {
					showInfo("请输入验证码");
					return;
				}
				const userInfo = StorageUtils.get(CacheConfig.USER_INFO_KEY);
				const param = {
					type: "mobile",
					username: this.account,
					validcode: this.code,
					nickName: this.nickName,
					clientId: userInfo.clientId,
				};
				register(param).then(res => {
					console.log("register success", res);
					showInfo("添加成功");
					this.findUser(this.account);
				}).catch(err => {
					console.log("register error", err);
					if (err.statusCode === '002101') {
						console.log("用户已存在查找用户id");
						this.findUser(this.account, true);
					} else {
						showInfo(err.errMsg);
					}
				})
			},
			findUser(phone, isExist = false) {
				getUserIdByPhone(phone).then(res => {
					console.log("getUserIdByPhone success", res);
					const {
						id,
						nickName
					} = res.obj;
					if(isExist) {
						console.log('加入家庭');
						this.bindHome(id);
						// this.setNickName(nickName, )
					} else {
						uni.navigateTo({
							url: `/pages/mine/personal?userId=${id}&nickName=${nickName}`
						})
					}
				}).catch(err => {
					console.log("getUserIdByPhone error", res);
				})
			},
			bindHome(userId) {
				const homeId = StorageUtils.get("homeId");
				const param = {
					homeId,
					invitedUserId: userId,
				};
				console.log("joinHome param", param);
				joinHome(param).then(res => {
					console.log("joinHome success", res);
					this.setNickName(userId);
				}).catch(err => {
					console.log("joinHome error", err);
				})
			},
			setNickName(currentUserId) {
				const userInfo = StorageUtils.get(CacheConfig.USER_INFO_KEY);
				const param = {
					nic: this.nickName,
					userId: userInfo.id,
					toUserId: currentUserId,
				};
				setHomeNickName(param).then(res => {
					console.log("setHomeNickName success", res);
					uni.navigateBack({delta: 2});
				}).catch(err => {
					console.log("setHomeNickName error", err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.invite-member {
		height: 100vh;
		padding: 0 24rpx;
		background-color: #f5f5f7;

		.form {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 66rpx;

			.form-item {
				margin-bottom: 56rpx;

				.label {
					margin-bottom: 25rpx;
					margin-left: 22rpx;
					font-family: SourceHanSansCN;
					font-size: 36rpx;
					font-weight: bold;
					color: #2b2a2e;
				}

				.input-wrapper {
					width: 700rpx;
					height: 122rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
					display: flex;
					align-items: center;
					padding: 0 30rpx;
					box-sizing: border-box;

					.input {
						flex: 1;
						font-size: 36rpx;
						color: #626262;
						font-weight: bold;
					}

					.btn {
						width: 200rpx;
						height: 80rpx;
						border-radius: 20rpx;
						color: #FFFFFF;
						background-color: #0dd30c;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.disabled-btn {
						background-color: #909090;
					}

				}
			}
		}

		.add-btn {
			width: 367rpx;
			height: 97rpx;
			border-radius: 97rpx;
			background-color: #0dd30c;
			font-family: SourceHanSansCN;
			font-size: 36rpx;
			color: #FFFFFF;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 80rpx auto 0 auto;
		}
	}
</style>
